<template>
	<view>
		 <div class="content">
			 <div class="head">
				 <image src="../../static/logo.png" style="width: 80px;height: 80px;"></image>
				 <p class="title">CRM客户关系管理系统</p>
				 <p class="desc">客户全流程高效管理</p>
			 </div>
			
			 <div class="login">
				 <div class="login-item">
					 <text>工号</text>
					 <div class="input-account">
						 <input v-model="userName" placeholder="请输入工号" type="text" ></input>
					 </div>
				 </div> 
				 <div class="login-item">
					 <text>密码</text>
					 <div class="input-pwd">
						 <input v-model="password"  placeholder="请输入密码" type="password" ></input>
					 </div>
				 </div> 
				 <div class="login-btn">
					 <button class="cu-btn block bg-green margin-tb-sm lg" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
				 </div>
			 </div>
		 </div>
		 <div class="footer">
			 <p>版权所有</p>
		 </div>
		 
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		data() {
			return {
				userName:"",
				password:"",
			};
		},
		onShow() {
			this.openLocation();
		},
		methods: {
			//获取数据字典
			getDicts:function(){
				api.getDicts().then(
					res => {
						if(res.code==200){
						
							uni.setStorageSync('dicts',JSON.stringify(res));
							uni.reLaunch({
								url: '../index/index',
								animationType: 'pop-in',
								animationDuration: 100
							})
						}else{
							 
						}
					},
					rej => {}
				);
			},
			login: function() {
				if (this.utils.isEmpty(this.userName)) {
					uni.showToast({
						title: "请输入工号",
						icon: 'none',
					});
					return
				}
				if (this.utils.isEmpty(this.password)) {
					uni.showToast({
						title: "请输入密码",
						icon: 'none',
					});
					return
				}
				var data = {
					userName:this.userName,
					password: this.password,
				};
				var that=this;
				api.loginByPwd(data).then(
					res => {
						console.log(res);
						if(res.code==200){
							console.log(res.data.token);
							uni.setStorageSync('perms',JSON.stringify(res.data.perms));
							uni.setStorageSync('AppToken',res.data.token);
							uni.setStorageSync('user',JSON.stringify(res.data.user));
							that.getDicts()
							// uni.authorize({
							// 	scope: 'scope.userInfo',
							// 	success() {
							// 		that.uniLogin();
							// 	},
							// 	fail() {
							// 		uni.showModal({
							// 			title: '提示',
							// 			content: '为了完成您的账号登录绑定，需要您授权小程序获取必要个人信息。',
							// 			confirmText: '确定',
							// 			cancelText: '取消',
							// 			success(res) {
							// 				if (res.confirm) {
							// 					that.uniLogin();
							// 				}
							// 			}
							// 		})
							// 	}
							// });
						}
						else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
						
					},
					rej => {}
				);
				return;
				// uni.showActionSheet({
				//     itemList: ['A', 'B', 'C'],
				//     success: function (res) {
				// 		uni.reLaunch({
				// 			url: '../index/index',
				// 			animationType: 'pop-in',
				// 			animationDuration: 100
				// 		})
				        
				//     },
				//     fail: function (res) {
				//         console.log(res.errMsg);
				//     }
				// });
				 
			},
			openMsg(){
				var that=this;
				uni.showModal({
					title: '提示',
					content: '小程序需要订阅消息',
					success(res) {
						if (res.confirm) {
							uni.requestSubscribeMessage({
								tmplIds: that.baseConfig.customerTemp,
								success(res) {
									uni.reLaunch({
										url: '../index/index',
										animationType: 'pop-in',
										animationDuration: 100
									})
									
								},
								fail(res) {
									uni.reLaunch({
										url: '../index/index',
										animationType: 'pop-in',
										animationDuration: 100
									})
									console.log(res.errMsg)
								}
							})
						}
					}
				})
			},
			openLocation(){
				var that=this;
				uni.authorize({
					scope:'scope.userLocation',
					success() {
						uni.getLocation({
							type: 'gcj02',//腾讯地图使用gcj02获取位置坐标
							success: function (res) {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
								
								
							},
						})
					},
					fail(err){
						 console.log(err)
					}
				})
			},
			//用户登录
			uniLogin() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code;
						uni.getUserInfo({
							success(res) {
								// var encryptedData = res.encryptedData;
								// var iv = res.iv;
								var data = {
									code: code,
								};
								//小程序登录
								api.loginWx(data).then(
									res => {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
										if(res.code==200){
											that.openMsg()
										}
									},
									rej => {}
								);
							}
						})
					},
					fail() {
						console.log('微信登录失败');
					}
				});
			},
			
		},
		onLoad() {
			 
		}
	};
</script>

<style>
	page{
		background-color: #ffffff;
	}
	.content .head{
		text-align: center;
		width: 100%;
	}
	.content .head image{
		margin-top: 60px;
		width: 100%;
		border-radius: 10px;
		box-shadow:0px 0px 20px rgba(0,0,0,0.1);
	}
	 
	.input-account{
		margin-top: 10px;
		margin-bottom: 10px;
		border-radius:20px;
		border:solid 0.5px #dfdfdf;
		height: 40px;	
		width: 100%;
		background:url(../../static/account.png) no-repeat 0 center;
		background-size: 15px 15px;
		background-position: 10px;
	 
	}
	.input-pwd{
		margin-top: 10px;
		margin-bottom: 10px;
		border-radius:20px;
		border:solid 0.5px #dfdfdf;
		height: 40px;	
		width: 100%;
		background:url(../../static/password.png) no-repeat 0 center;
		background-size: 15px 15px;
		background-position: 10px;
	}
	.input-account input{
		margin-left: 35px;
		height: 40px;
		line-height: 40px;
	}
	
	.input-pwd input{
		margin-left: 35px;
		height: 40px;
		line-height: 40px;
	}
	.title{
		font-family: ;
		color: #141414;
		margin:0 0 10px 10px;
		font-size: 20px;
	}
	.desc{
		color: #686866;
		margin:10 0 10px 0px;
		font-size: 15px;
	}
	.login{
		margin: 25px;
	}
	.login-item p{
		text-align: left;
	}
	.login-btn{
		
		border-radius:15px;
		margin-top: 30px;
	}
	.footer{
		color: #686866;
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
		position: absolute;
		bottom: 0px;
	}
	.footer radio{
		
	}
	.uni-input-placeholder{
		font-size: 12px;
	}
	
	 

</style>
